<template>
    <div class="container">

        <div class="screen" ref="screen">
            <div class="top">
                <top></top>
            </div>
            <div class="bottom">
                <div class="left">
                    <tourist class="tourist"></tourist>
                    <sex class="sex"></sex>
                    <age class="age"></age>

                </div>
                <div class="center">
                    <MyMap class="map"></MyMap>
                    <tendency class="tendency"></tendency>
                </div>
                <div class="right">
                    <rank class="rank"></rank>
                    <sandian class="sandian"></sandian>
                    <radar class="radar"></radar>
                </div>

            </div>
        </div>
    </div>
</template>
<script setup>
    import top from '@/views/screen/component/top/index.vue'
    import tourist from '@/views/screen/component/left/tourist/index.vue'
    import age from '@/views/screen/component/left/age/index.vue'
    import sex from '@/views/screen/component/left/sex/index.vue'
    import MyMap from '@/views/screen/component/center/map/index.vue'
    import tendency from '@/views/screen/component/center/tendency/index.vue'
    import radar from '@/views/screen/component/right/radar/index.vue'
    import sandian from '@/views/screen/component/right/sandian/index.vue'

    import rank from '@/views/screen/component/right/rank/index.vue'
    import { ref, onMounted } from 'vue'
    let screen = ref()
    onMounted(() => {
        console.log(screen.value);
        screen.value.style.transform = `scale(${getScale()})translate(-50%,-50%)`
    })
    const getScale = (w = 1920, h = 1080) => {
        const ww = window.innerWidth / w;
        const wh = window.innerHeight / h;
        return ww < wh ? ww : wh
    }
    //监听视口变化
    window.onresize = () => {
        screen.value.style.transform = `scale(${getScale()})translate(-50%,-50%)`

    }
</script>
<style scoped lang='scss'>
    .container {
        width: 100vw;
        height: 100vh;
        background: url(./images/bg.png) no-repeat;
        background-size: cover;
    }

    .screen {
        position: fixed;
        width: 1920px;
        height: 1080px;
        top: 50%;
        left: 50%;
        transform-origin: left top;


        .top {
            height: 80px;

        }

        .bottom {
            display: flex;
            width: 100%;
            margin-bottom: 20px;

            .left {
                flex: 1;
                height: 1040px;
                display: flex;
                flex-direction: column;


                .tourist {
                    flex: 1.1;

                }

                .sex {
                    flex: 0.8;

                }

                .age {
                    flex: 1
                }
            }

            .center {
                flex: 2;
                height: 1040px;
                display: flex;
                flex-direction: column;

                .map {
                    flex: 2.4;

                }

                .tendency {
                    flex: 1.2;

                }
            }

            .right {
                flex: 1;
                height: 1040px;
                display: flex;
                flex-direction: column;


                .rank {
                    flex: 1.1;

                }

                .sandian {
                    flex: 0.8;

                }

                .radar {
                    flex: 1
                }
            }
        }
    }
</style>